<template>
  <div>
    <el-dialog title="产品" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
      <el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="店铺状态" prop="entityStatus">
          <el-radio-group v-model="form.entityStatus">
            <el-radio label="opening">已开业</el-radio>
            <el-radio label="prepare">筹备中</el-radio>
            <el-radio label="end">已结束</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="店名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="地址url" prop="url">
          <el-input v-model="form.url" />
        </el-form-item>

        <el-form-item label="店铺标签" prop="tags">
          <el-input v-model="form.tags" />
        </el-form-item>
        <el-form-item label="店铺类型" prop="entityProductTypeId">
          <el-select v-model="form.entityProductTypeId" placeholder="请选择">
            <el-option v-for="item in productTypeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否合伙人返利" prop="isPartnerEarnings">
          <el-radio-group v-model="form.isPartnerEarnings">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预计开业时间" prop="expectedOpeningTime">
          <el-date-picker v-model="form.expectedOpeningTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开业时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺面积" prop="extent">
          <el-input v-model="form.extent" />
        </el-form-item>
        <el-form-item label="店铺总投资" prop="totalInvestAmount">
          <el-input v-model="form.totalInvestAmount" />
        </el-form-item>
        <el-form-item label="毛利率" prop="grossMargin">
          <el-input v-model="form.grossMargin" />
        </el-form-item>
        <el-form-item label="每份金额" prop="minInvestAmount">
          <el-input v-model="form.minInvestAmount" />
        </el-form-item>
        <el-form-item label="排序权重" prop="sort">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <el-upload class="upload-demo" :action="url()" :on-preview="handlePreview3" :on-remove="handleRemove3"
            :file-list="coverFileList" :headers="{ Authorization: Authorization }" :on-success="handleSuccess3"
            list-type="picture" :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最多上传1张</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="展示图片" prop="images">
          <el-upload class="upload-demo" :action="url()" :on-preview="handlePreview" :on-remove="handleRemove"
            :file-list="fileList" :headers="{ Authorization: Authorization }" :on-success="handleSuccess"
            list-type="picture" :limit="3">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最多上传3张</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品内容图" prop="modelImages">
          <el-upload class="upload-demo" :action="url()" :on-preview="handlePreview2" :on-remove="handleRemove2"
            :file-list="modelImagesFileList" :headers="{ Authorization: Authorization }" :on-success="handleSuccess2"
            list-type="picture" :limit="3">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最多上传3张</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频" prop="video">
          <el-upload class="upload-demo" :action="url()" :on-preview="handlePreview4" :on-remove="handleRemove4"
            :file-list="modelVideoFileList" :headers="{ Authorization: Authorization }" :on-success="handleSuccess4"
            list-type="picture" :limit="3">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最多上传3</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="需要投资金额" prop="amount">
          <el-input v-model="form.amount" />
        </el-form-item>
        <el-form-item label="股权比例" prop="stockOptionsRate">
          <el-input v-model="form.stockOptionsRate" />
        </el-form-item>

        <el-form-item label="投资截止时间" prop="endTime">
          <!-- <el-input v-model="form.endTime" placeholder="请输入业绩倍率" /> -->
          <el-date-picker v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择投资截止时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分红周期" prop="dividendCycle">
          <el-input type="number" v-model="form.dividendCycle" placeholder="请输入分红周期" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduce">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.introduce">
          </el-input>
        </el-form-item>
        <el-form-item label="月预计最低营业额" prop="minTurnover">
          <el-input type="number" v-model="form.minTurnover" placeholder="请输入分红周期" />
        </el-form-item>
        <el-form-item label="月预计最高营业额" prop="maxTurnover">
          <el-input type="number" v-model="form.maxTurnover" placeholder="请输入分红周期" />
        </el-form-item>
        <el-form-item label="净利润" prop="earnings">
          <el-input type="number" v-model="form.earnings" placeholder="请输入分红周期" />
        </el-form-item>
        <el-form-item label="预计回本最快周期" prop="recoveryMinCycle">
          <el-input type="number" v-model="form.recoveryMinCycle" placeholder="请输入分红周期" />
        </el-form-item>
        <el-form-item label="预计回本最慢周期" prop="recoveryMaxCycle">
          <el-input type="number" v-model="form.recoveryMaxCycle" placeholder="请输入分红周期" />
        </el-form-item>

        <div v-for="(item, index) in remarks" :key="index" style="margin-top: 50px;">
          <el-divider v-if="index == 0">
            <h3>一·营业数据</h3>
          </el-divider>
          <el-divider v-if="index == 2">
            <h3>二．成本数据</h3>
          </el-divider>

          <el-divider v-if="index == 4">
            <h3>三．合作渠道</h3>
          </el-divider>
          <el-divider v-if="index == 6">
            <h3>四．推广宣传</h3>
          </el-divider>
          <el-divider v-if="index == 8">
            <h3>五．服务团队</h3>
          </el-divider>
          <el-divider v-if="index == 10">
            <h3>六．服务内容</h3>
          </el-divider>
          <el-divider v-if="index == 12">
            <h3>七．未来发展</h3>
          </el-divider>
          <el-divider v-if="index == 15">
            <h3>八．投资优势</h3>
          </el-divider>
          <el-form-item :label="item.name">
            <el-input type="text" v-model="item.text" :placeholder="'请输入' + item.name + '大约' + item.size" />
          </el-form-item>
        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="showImgState">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { entitySave, action, typeList, productGet } from '@/api/table'
import { getToken } from '@/utils/auth'

export default {
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      showImgState: false,
      dialogImageUrl: '',
      listLoading: true,
      total: 0,
      fileList: [],
      modelImagesFileList: [],
      modelVideoFileList: [],

      coverFileList: [],
      introductFileList: [],
      queryParams: {
        rate: '',
        userId: ''
      },
      list: [],
      record: {},
      url: action,
      Authorization: '',
      productTypeList: [],
      remarks: [
        {
          name: '营收增长趋势',
          text: '',
          size: "230字"
        },
        {
          name: '客单价与客流量',
          text: '',
          size: "230字"
        },
        {
          name: '基础成本',
          text: '',
          size: "210字"
        },
        {
          name: '运营成本',
          text: '', 
          size: "210字"
        },
        {
          name: '本地与国内协同',
          text: '', 
          size: "300字"
        },
        {
          name: '其他渠道',
          text: '', 
          size: "230字"
        },
        {
          name: '线上矩阵',
          text: '', 
          size: "260字"
        },
        {
          name: '线下活动',
          text: '', 
          size: "240字"
        },
        {
          name: '团队背景',
          text: '', 
          size: "165字"
        },
        {
          name: '核心理念',
          text: '', 
          size: "135字"
        },
        {
          name: '基础服务产品',
          text: '', size: "250字"
        },
        {
          name: '特色服务产品',
          text: '', size: "200字"
        },
        {
          name: '区域服务拓展',
          text: '', size: "140字"
        },
        {
          name: '服务类型升级',
          text: '', size: "160字"
        },
        {
          name: '数字化营销转型',
          text: '', size: "160字"
        },
        {
          name: '品牌影响力',
          text: '', size: "100字"
        },
        {
          name: '全方位运营支持',
          text: '', size: "100字"
        },
        {
          name: '高利润回报潜力',
          text: '', size: "120字"
        },
        {
          name: '广阔市场发展潜力',
          text: '', size: "120字"
        },

      ],
      form: {
        name: '',
        address: '',
        entityStatus: "",
        url: '',
        images: [],
        video: [],
        amount: '',
        stockOptionsRate: '',
        endTime: '',
        modelImages: [],
        dividendCycle: '',
        cover: '',
        entityProductTypeId: '',
        tags: '',
        expectedOpeningTime: '',
        extent: '',
        totalInvestAmount: '',
        grossMargin: '',
        minInvestAmount: '',
        sort: '',
        introduce: '',
        minTurnover: '',
        maxTurnover: '',
        earnings: '',
        recoveryMinCycle: '',
        recoveryMaxCycle: '',
        isPartnerEarnings: 1,
        remarks: ""
      },
      rules: {
        entityStatus: [
          { required: true, message: '请选择店铺状态', trigger: 'change' }

        ],
        entityProductTypeId: [
          { required: true, message: '请选择店铺类型', trigger: 'change' }

        ],
        isPartnerEarnings: [
          { required: true, message: '请选择是否合伙人返利', trigger: 'change' }
        ],
        tags: [
          { required: true, message: '请输入店铺标签，多个顿号隔开', trigger: 'change' }

        ],
        expectedOpeningTime: [
          { required: true, message: '请输入预计开业时间', trigger: 'change' }

        ],
        extent: [
          { required: true, message: '请输入店铺面积', trigger: 'change' }

        ],
        totalInvestAmount: [
          { required: true, message: '请输入店铺总投资', trigger: 'change' }

        ],
        grossMargin: [
          { required: true, message: '请输入毛利率', trigger: 'change' }

        ],
        minInvestAmount: [
          { required: true, message: '请输入每份金额', trigger: 'change' }

        ],
        sort: [
          { required: true, message: '请输入排序权重', trigger: 'change' }

        ],
        name: [
          { required: true, message: '请输入店名', trigger: 'change' }

        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }

        ],
        url: [
          { required: true, message: '请输入地址url', trigger: 'blur' }

        ],

        cover: [
          { required: true, message: '上传封面图', trigger: 'change' }

        ],
        images: [
          { required: true, message: '上传展示图片', trigger: 'change' }

        ], amount: [
          { required: true, message: '请输入投资金额', trigger: 'blur' }

        ],
        stockOptionsRate: [
          { required: true, message: '请输入股权比例,例如0.1', trigger: 'blur' }

        ],
        endTime: [
          { required: true, message: '请上传投资截至时间', trigger: 'blur' }
        ],
        modelImages: [
          { required: true, message: '请上传模型长图介绍', trigger: 'change' }
        ],
        dividendCycle: [
          { required: true, message: '请输入分红周期', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入介绍', trigger: 'blur' }
        ],
        minTurnover: [
          { required: true, message: '请输入月预计最低营业额', trigger: 'blur' },
        ],
        maxTurnover: [
          { required: true, message: '请输入月预计最高营业额', trigger: 'blur' },
        ],
        earnings: [
          { required: true, message: '请输入利润', trigger: 'blur' },
        ],
        recoveryMinCycle: [
          { required: true, message: '请输入预计回本最快周期', trigger: 'blur' },
        ],
        recoveryMaxCycle: [
          { required: true, message: '请输入预计回本最慢周期', trigger: 'blur' },
        ]
      }

    }
  },
  methods: {

    handleSuccess(response, file, fileList) {
      console.log(fileList)
      this.form.images = []
      fileList.map(item => {
        if (item.response) {
          this.form.images.push(item.response.data)
        } else {
          this.form.images.push(item.url)
        }
      })
      this.$forceUpdate()
    },

    handleRemove(file, fileList) {
      this.fileList = fileList
      this.form.images = []
      fileList.map(item => {
        if (item.response) {
          this.form.images.push(item.response.data)
        } else {
          this.form.images.push(item.url)
        }
      })
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.showImgState = true
    },
    handleSuccess2(response, file, fileList) {
      this.form.modelImages = []
      fileList.map(item => {
        if (item.response) {
          this.form.modelImages.push(item.response.data)
        } else {
          this.form.modelImages.push(item.url)
        }
      })
      this.$forceUpdate()


    },
    handleRemove2(file, fileList) {
      this.modelImagesFileList = fileList
      this.form.images = []
      fileList.map(item => {
        if (item.response) {
          this.form.modelImages.push(item.response.data)
        } else {
          this.form.modelImages.push(item.url)
        }
      })
    },
    handlePreview2(file) {
      this.dialogImageUrl = file.url
      this.showImgState = true
    },

    handleSuccess3(response, file, fileList) {
      this.form.cover = fileList[0].response.data

      this.$forceUpdate()


    },

    handleRemove3(file, fileList) {
      this.coverFileList = fileList
      this.form.cover = ''

    },
    handlePreview3(file) {
      this.dialogImageUrl = file.url
      this.showImgState = true
    },
    handleSuccess4(response, file, fileList) {
      this.form.video = []
      fileList.map(item => {
        if (item.response) {
          this.form.video.push(item.response.data)
        } else {
          this.form.video.push(item.url)
        }

      })
      this.$forceUpdate()
    },

    handleRemove4(file, fileList) {
      this.modelVideoFileList = fileList
      this.form.video = []
      fileList.map(item => {
        if (item.response) {
          this.form.video.push(item.response.data)
        } else {
          this.form.video.push(item.url)
        }

      })
    },
    handlePreview4(file) {
      this.dialogImageUrl = file.url
      this.showImgState = true
    },
    async getProductTypeList() {
      const res = await typeList({ pageNum: 1, pageSize: 100 })
      this.productTypeList = res.data.records


    },
    edit(e) {
      console.log(JSON.parse(e.remarks))
      if(e.remarks){
        let list = JSON.parse(e.remarks)
        list.map((item,index)=>[
          this.remarks.map((i,idx)=>{
            if(item.name == i.name){
              item.size = i.size
            }
          })
           
        ])
        this.remarks = list
        console.log(list)
      }
      this.form = JSON.parse(JSON.stringify(e))
      // if (this.form.remarks) {
      //   this.remarks = JSON.parse(this.form.remarks)
      //   console.log(this.remarks )
      // }
      this.fileList = this.form.images.map(item => {
        return {
          name: item,
          url: item
        }
      })
      this.modelImagesFileList = this.form.modelImages.map(item => {
        return {
          name: item,
          url: item
        }
      })
      if (this.form.video) {
        this.modelVideoFileList = this.form.video.map(item => {
          return {
            name: item,
            url: item
          }
        })
      }

      this.coverFileList = [{
        name: this.form.cover,
        url: this.form.cover
      }]
      this.dialogVisible = true
      this.Authorization = 'Bearer ' + getToken()
      this.getProductTypeList()
    },
    async show(record) {
      this.dialogVisible = true
      this.Authorization = 'Bearer ' + getToken()
      this.getProductTypeList()
      this.fileList = []
      this.modelImagesFileList = []
      this.modelVideoFileList = []
      this.coverFileList = []
      this.remarks =[
        {
          name: '营收增长趋势',
          text: '',
          size: "230字"
        },
        {
          name: '客单价与客流量',
          text: '',
          size: "230字"
        },
        {
          name: '基础成本',
          text: '',
          size: "210字"
        },
        {
          name: '运营成本',
          text: '', 
          size: "210字"
        },
        {
          name: '本地与国内协同',
          text: '', 
          size: "300字"
        },
        {
          name: '其他渠道',
          text: '', 
          size: "230字"
        },
        {
          name: '线上矩阵',
          text: '', 
          size: "260字"
        },
        {
          name: '线下活动',
          text: '', 
          size: "240字"
        },
        {
          name: '团队背景',
          text: '', 
          size: "165字"
        },
        {
          name: '核心理念',
          text: '', 
          size: "135字"
        },
        {
          name: '基础服务产品',
          text: '', size: "250字"
        },
        {
          name: '特色服务产品',
          text: '', size: "200字"
        },
        {
          name: '区域服务拓展',
          text: '', size: "140字"
        },
        {
          name: '服务类型升级',
          text: '', size: "160字"
        },
        {
          name: '数字化营销转型',
          text: '', size: "160字"
        },
        {
          name: '品牌影响力',
          text: '', size: "100字"
        },
        {
          name: '全方位运营支持',
          text: '', size: "100字"
        },
        {
          name: '高利润回报潜力',
          text: '', size: "120字"
        },
        {
          name: '广阔市场发展潜力',
          text: '', size: "120字"
        },

      ]
      this.form = {
        entityStatus: "",
        name: '',
        address: '',
        url: '',
        images: [],
        amount: '',
        stockOptionsRate: '',
        endTime: '',
        modelImages: '',
        dividendCycle: '',
        cover: '',
        entityProductTypeId: '',
        tags: '',
        expectedOpeningTime: '',
        extent: '',
        totalInvestAmount: '',
        grossMargin: '',
        minInvestAmount: '',
        sort: '',
        introduce: '',
        minTurnover: '',
        maxTurnover: '',
        earnings: '',
        recoveryMinCycle: '',
        recoveryMaxCycle: '',
        isPartnerEarnings: 1,
        remarks: ""
      }
    },
    confirm() {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('是否确认?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.form.remarks = JSON.stringify(this.remarks)
            entitySave(this.form).then(res => {
              this.dialogVisible = false
              this.queryParams.rate = ''
              this.$parent.fetchData()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            })
          })
        } else {

          console.log('error submit!!', this.form)
          return false
        }
      })
    }

  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
h3{
  margin: 5px 0;
}
.list {
  .item {
    border: 1px solid #c0ccda;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 10px;

    >div {
      display: flex;

      img {
        margin-right: 15px;
      }
    }

    >i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
